<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'; // 引入 onMounted
import type { ComponentSize, FormInstance, FormRules, UploadInstance, UploadFile } from 'element-plus';
import { ElMessageBox, ElMessage } from 'element-plus';
import axios from 'axios';
import NavMenu from '../component/NavMenu.vue';
import BottomLine from '../component/BottomLine.vue';

// 表单数据类型
interface RuleForm {
    datasetName: string;
    datasetUrl: string;
    userId: string;
}

// 表格数据类型
interface DataSet {
    updateTime: string;
    datasetName: string;
    datasetId: string;
    datasetUrl: string;
    uploadUserId: string;
}

interface addFrom {

}

// 表单大小
const formSize = ref<ComponentSize>('default');

// 表单引用
const ruleFormRef = ref<FormInstance>();

// 表单数据
const ruleForm = reactive<RuleForm>({
    datasetName: '',
    datasetUrl: '',
    userId: ''
});

// 表单验证规则
const rules = reactive<FormRules<RuleForm>>({
    datasetName: [
        { required: true, message: '请输入数据集名称', trigger: 'blur' },
    ],
    datasetUrl: [
        { required: true, message: '请上传数据集文件', trigger: 'blur' },
    ],
});

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    try {
        await formEl.validate((valid) => {
            if (valid) {
                console.log('表单提交成功:', ruleForm);
                // 构造要发送的数据
                const dataset = {
                    datasetName: ruleForm.datasetName,
                    datasetUrl: ruleForm.datasetUrl,
                    uploadUserId: ruleForm.userId
                };
                // 发送 POST 请求
                axios.post('http://127.0.0.1:8080/addDataset', dataset)
                    .then(async (response) => {
                        if (response.data.code === 1) {
                            ElMessage.success('提交成功！');
                            dialogVisible.value = false; // 关闭对话框
                            const response = await axios.get('http://127.0.0.1:8080/dataSet');
                            tableData.value = response.data.data;
                            resetForm(ruleFormRef.value);
                        } else {
                            ElMessage.error('提交失败：' + response.data.message);
                        }
                    })
                    .catch((error) => {
                        console.error('提交失败:', error);
                        ElMessage.error('提交失败，请重试！');
                    });
            } else {
                console.log('表单验证失败');
                ElMessage.error('请填写完整信息！');
            }
        });
    } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败，请重试！');
    }

};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    if (uploadRef.value) {
        uploadRef.value.clearFiles();
    }
    formEl.resetFields();
};

// 文件上传逻辑
const uploadRef = ref<UploadInstance>();
const handleFileChange = async (file: UploadFile) => {
    console.log('文件已选择:', file);
    try {
        const formData = new FormData();
        formData.append('dataset', file.raw!);
        const response = await axios.post('http://127.0.0.1:8080/upload1', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });
        ruleForm.datasetUrl = response.data.data; // 假设返回的 URL 在 data 字段中
        ElMessage.success('文件上传成功');
    } catch (error) {
        console.error('文件上传失败:', error);
        ElMessage.error('文件上传失败，请重试');
    }
};

const beforeUpload = (file: UploadFile) => {
    // 可以在这里添加文件类型、大小等验证逻辑
    return true;
};

// 表格数据
const tableData = ref<DataSet[]>([]); // 使用 ref 定义表格数据
const stored_user = localStorage.getItem("user_information");
const user_info = JSON.parse(stored_user);
// 页面加载时获取数据集数据
onMounted(async () => {

    ruleForm.userId = user_info.userId;
    try {
        const response = await axios.get('http://127.0.0.1:8080/dataSet'); // 请求后端接口
        if (response.data.code === 1) {
            tableData.value = response.data.data; // 将返回的数据赋值给 tableData
            ElMessage.success('数据集加载成功');
        } else {
            ElMessage.error('数据集加载失败');
        }
    } catch (error) {
        console.error('数据集加载失败:', error);
        ElMessage.error('数据集加载失败，请重试');
    }
});

// 表格搜索功能
const search = ref('');
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.datasetName.toLowerCase().includes(search.value.toLowerCase())
    )
);

// 表格操作
const handleEdit = (index: number, row: DataSet) => {
    console.log('编辑行:', index, row);
};

const handleDelete = async (index: number, row: DataSet) => {
    try {
        const confirmResult = await ElMessageBox.confirm('确定要删除该数据集吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        if (confirmResult === 'confirm') {
            const response = await axios.delete(`http://127.0.0.1:8080/deleteById1/${row.datasetId}`);
            if (response.data.code === 1) {
                ElMessage.success('删除成功');
                // 从 tableData 中移除已删除的数据
                const newTableData = tableData.value.filter(data => data.datasetId !== row.datasetId);
                tableData.value = newTableData;
            } else {
                ElMessage.error('删除失败：' + response.data.message);
            }
        }
    } catch (error) {
        if (error instanceof Error && error.message !== 'cancel') {
            console.error('删除失败:', error);
            ElMessage.error('删除失败，请重试');
        }
    }
};

const onSubmit = async () => {
    // alert('提交了');
    // console.log(formInline.date);
    if (formInline.date!=='')
    {
      let dates=formInline.date[0];
      let datee=formInline.date[1];
        let date = new Date(dates);
        let formattedDate = date.getFullYear() + '-' +
                            ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                            ('0' + date.getDate()).slice(-2);
        formInline.datestart=formattedDate;
        date = new Date(datee);
        formattedDate = date.getFullYear() + '-' +
                            ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                            ('0' + date.getDate()).slice(-2);
        formInline.dateend=formattedDate;
    }
    console.log(formInline.datestart,' ',formInline.dateend)

    try {

        // 发起 POST 请求
        const response = await axios.post('http://127.0.0.1:8080/selectDataset', {
            datasetName:formInline.dataset,
            uploadUserId:formInline.user,
            updateTimeStart:formInline.datestart,
            updateTimeEnd:formInline.dateend
        });

        // 处理响应
        if (response.data.msg === "success") {
            console.log('查询成功:', response.data);
            ElMessage({
                message: '查询成功',
                type: 'success',
            });
            tableData.value = response.data.data;
        }
        else {
            console.error('查询失败');
            ElMessage({
                message: '查询失败',
                type: 'error',
            });
        }
    } catch (error) {
        // 处理表单验证错误或请求失败
        console.error('查询失败:', error);
        ElMessage({
            message: '查询失败',
            type: 'error',
        });
    }
    // console.log(formInline.datestart,' ',formInline.dateend)
};

// 对话框逻辑
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定关闭对话框吗？')
        .then(() => {
            resetForm(ruleFormRef.value);
            done();
        })
        .catch(() => {
            // 取消关闭
        });
};

const formInline = reactive({
    dataset: '',
    user: '',
    date: '',
    datestart:'',
    dateend:''
});
const formatUpdateTime = (row: DataSet, column: any, cellValue: string) => {
    return cellValue.replace('T', ' ').split('+')[0];
};

// 分页
// import type { ComponentSize } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<template>
    <div>
        <NavMenu />
        <el-container>
            <el-main>
                <!-- 搜索表单 -->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="数据集名">
                        <el-input v-model="formInline.dataset" placeholder="数据集名" style="width:170px" clearable />
                    </el-form-item>
                    <el-form-item label="上传用户">
                        <el-input v-model="formInline.user" placeholder="上传用户id" style="width:170px" clearable />
                    </el-form-item>
                    <el-form-item label="上传日期">

                        <el-date-picker v-model="formInline.date" type="daterange" unlink-panels range-separator="到"
                            start-placeholder="开始日期" end-placeholder="结束日期"
                         clearable/>
                        <!-- <el-date-picker v-model="formInline.date" type="date" placeholder="请选择日期" clearable /> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
                    </el-form-item>
                </el-form>

                <!-- 数据表格 -->
                <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
                    " style="width: 100%">
                    <el-table-column label="数据集名" prop="datasetName" />
                    <el-table-column label="上传用户" prop="userName" />
                    <el-table-column label="上传日期" prop="updateTime" :formatter="formatUpdateTime" />
                    <el-table-column label="数据集url">
                        <template #default="scope">
                            <el-link :href=scope.row.datasetUrl target="_blank" :underline="false">{{
                                scope.row.datasetUrl }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column align="right">
                        <template #header>
                            <el-input v-model="search" size="small" placeholder="Type to search" />
                        </template>
                        <template #default="scope">
                            <el-button size="small" v-if="scope.row.uploadUserId === user_info.userId"
                                @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button size="small" v-else disabled>
                                编辑
                            </el-button>
                            <el-button size="small" type="danger" v-if="scope.row.uploadUserId === user_info.userId"
                                @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                            <el-button size="small" type="danger" v-else disabled>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="demo-pagination-block">
                    <div class="demonstration"></div>
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[1, 5, 10, 20]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="filterTableData.length"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>

            <!-- 新增数据集对话框 -->
            <el-dialog v-model="dialogVisible" title="新增数据集" width="500" :before-close="handleClose">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                    :size="formSize" status-icon>
                    <!-- 数据集名称 -->
                    <el-form-item label="数据集名称" prop="datasetName">
                        <el-input v-model="ruleForm.datasetName" placeholder="请输入数据集名称" />
                    </el-form-item>
                    <!-- 数据集 URL 和文件选择按钮 -->
                    <el-form-item label="数据集 URL" prop="datasetUrl">
                        <el-input v-model="ruleForm.datasetUrl" autosize type="textarea" placeholder="请输入数据集 URL" />
                        <br>
                        <el-upload ref="uploadRef" class="upload-demo" action="http://127.0.0.1:8080/upload1"
                            :auto-upload="false" :on-change="handleFileChange" :before-upload="beforeUpload">
                            <template #trigger>
                                <el-button type="primary" style="margin-top:5px">选择文件</el-button>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-container>
        <BottomLine/>
    </div>
</template>

<style>
.demo-form-inline .el-input {
    --el-input-width: 150px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>